/**
 * 固定下拉菜单每个item元素的高度，
 * button元素高度固定 27，单位（rpx）[1rpx=0.5px]，
 * item高度来源见[class="checkbox-tag"]中的[height]样式，单位（rpx）[1rpx=0.5px]，
 * 注：因为CSS渲染中，是以`px`作为单位，
 * 而在JavaScript中设置高度为0，会导致在渲染时解析成1px,
 * 在CSS中，`1px`等于屏幕的`DPI`（每英寸点数）或`DPPX`（每英寸像素）。
 * 如果是在标清显示器上，`1px`可能等于屏幕上的实际`1px`，但在DPI显示器上，这可能会被放大。
 * 解决方案：使用不带单位的数值，故`itemHeight`不能以rpx数值进行计算，
 * 需要height[rpx] / 2后，以px为单位。
 */
const itemHeight = (40 + 27) / 2;

Component({
  data: {
    childBoxHeight: 0, // 子元素的高度
    maskVisible: false,
    options: [
      { label: '选项1', value: '1', checked:true },
      { label: '选项2', value: '2', checked:false },
      { label: '选项3', value: '3', checked:false },
      { label: '选项4', value: '4', checked:false },
      { label: '选项5', value: '5', checked:false },
      { label: '选项6', value: '6', checked:false },
      { label: '选项7', value: '7', checked:false },
      { label: '选项8', value: '8', checked:false },
    ]
  },
  methods: {
    /**
     * 下拉菜单
     */
    dropdownHandle() {
      const { options, childBoxHeight, maskVisible } = this.data;
      this.setData({
        childBoxHeight: childBoxHeight > 0 ? 0 :  options.length * itemHeight,
        maskVisible: !maskVisible
      });
    },
    /**
     * 点击遮罩层，隐藏下拉菜单样式
     */
    overlayClickHandle() {
      this.dropdownHandle();
    },

    /**
     * 点击选项，checkbox变更为选中样式
     */
    checkboxHandle(e) {
      let { index } = e.currentTarget.dataset; // 获取当前选中的索引
      const options = this.data.options;
      options[index].checked = !options[index].checked; // 切换选中状态
      this.setData({
        options: options
      });
    },

    resetBtnHandle() {
      // todo what you want
      wx.showToast({
        title: 'reset',
        icon: "success"
      });
    },
    confirmBtnHandle() {
      // todo what you want
      wx.showToast({
        title: 'confirm',
        icon: "success"
      });
    }
  }
});